<template>
	<view class="content">
		<nav class="top">
			<view class="nav-top">
				<img src="../../static/定位.png" alt="">
				<view class="address">
					<input @click="show = true" v-model="city" type="text" placeholder="地区（必填）" disabled class="text" />
					<u-picker mode="region" v-model="show" @confirm="getCity"></u-picker>
				</view>
			</view>
			<!-- 搜索框 -->
			<view class="search">
				<img src="../../static/搜索.png" alt="">
				<input type="text" value="" placeholder="阳澄湖大闸蟹" />
				<button @click="">搜索</button>
			</view>
		</nav>
		<!-- 轮播图 -->
		<view class="wrap">
			<u-swiper :list="list"></u-swiper>
		</view>
		<!-- 团购 -->
		<u-grid :col="5" :border="false">
			<u-grid-item>
				<img src="../../static/拼团购.png" />
				<view class="grid-text">团购</view>
			</u-grid-item>
			<u-grid-item>
				<img src="../../static/秒杀.png" />
				<view class="grid-text">秒杀</view>
			</u-grid-item>
			<u-grid-item>
				<img src="../../static/精选.png" />
				<view class="grid-text">精选</view>
			</u-grid-item>
			<u-grid-item>
				<img src="../../static/领券.png" />
				<view class="grid-text">领券</view>
			</u-grid-item>
			<u-grid-item>
				<img src="../../static/分享.png" />
				<view class="grid-text">分享</view>
			</u-grid-item>
		</u-grid>
		<!-- 今日秒杀 -->
		<view class="spikes">
			<view class="left">
				<view class="left1">
					<p>今日<span>秒杀</span></p>
					<u-count-down :timestamp="timestamp" bg-color="#efa447" color='#f8f8f8' separator-color="#fed5b1">
					</u-count-down>
				</view>
				<span class="color">限时折扣抢到就是赚到</span>
				<view class="left-image">
					<image class="image" src="../../static/鱼.png" mode=""></image>
					<image class="image" src="../../static/螃蟹.png" mode=""></image>
				</view>
			</view>
			<!-- 热销排行榜 -->
			<view class="right">
				<view class="right1">
					<p>热销排行榜</p>
					<p>更多 <span>></span></p>
				</view>
				<span class="color">大家都在买</span>
				<view class="right-image">
					<image class="image" src="../../static/火龙果.png" mode=""></image>
					<image class="image" src="../../static/菠萝.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 推荐-精选好物 -->
    <view class="recommend">
    	<view class="title">
    		推荐·精选好物
    	</view>
    	<view class="selected">
    		<view class="selected-content" v-for="(item,index) in selected" :key="index">
    			<robbery :image="item.image" :title1="item.title1" :title2="item.title2"
    				:title3="item.title3" :title4="item.title4" :title6="item.title6"
    				:title7="item.title7" :title5="item.title5" :title9="item.title9"
    				:title8="item.title8">
    			</robbery>
    		</view>
    	</view>
    </view>
	</view>
</template>

<script>
	import robbery from "../../componet/robbery/robbery.vue"
	export default {
		components:{
			robbery
		},
		data() {
			return {
				// 地址
				show: false,
				params: {
					province: true,
					city: true,
					area: true
				},
				city: "印象泰山",
				// 轮播图
				list: [{
						image: '/static/生鲜1.png'
					},
					{
						image: '/static/生鲜3.png'
					}
				],
				//倒计时
				timestamp: 86400,
        //精选好物
        selected:[{
          image:"/static/肉包.png",
          title1: '江苏无锡香菇猪肉包',
          title2: '猪肉肥美',
          title3: '鲜甜软嫩',
          title4: '多汁美味',
          title5: '多汁香嫩',
          title6: '8.79',
          title7: '笼',
          title8: '劵',
          title9: '减10元'
        },
        {
        	image: '/static/西兰花.png',
        	title1: '浙江临海西兰花',
        	title2: '基地自供',
        	title3: '绿色培植',
        	title4: '新鲜采摘',
        	title5: '绿色新鲜',
        	title6: '4.79',
        	title7: '斤'
        }, {
        	image: '/static/西红柿.png',
        	title1: '云南高山大西红柿',
        	title2: '鲜嫩多汁',
        	title3: '软甜爽口',
        	title4: '入口美味',
        	title5: '美味多汁',
        	title6: '2.44',
        	title7: '斤'
        }, {
        	image: '/static/土豆.png',
        	title1: '宁夏西吉县马铃薯',
        	title2: '基地自供',
        	title3: '绿色培植',
        	title4: '新鲜采摘',
        	title5: '绿色新鲜',
        	title6: '3.21',
        	title7: '斤'
        }
        ]
			}
		},
		onLoad() {

		},
		methods: {
			getCity(e) {
				console.log(this.city);
				this.city = e.province.label + e.city.label + e.area.label
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F8F8F8;
	}

	.top {
		background-color: #68C993;
		height: 400rpx;
		border-radius: 7%;
	}

	.nav-top {
		display: flex;
	}

	.nav-top img {
		width: 50rpx;
		height: 50rpx;
		margin-top: 55rpx;
		padding-left: 2vh;
	}

	.address {
		color: #fff;
		margin-top: 55rpx;

		input::-webkit-input-placeholder {
			/* placeholder颜色 */
			color: #fff;
			/* placeholder字体大小 */
			font-size: 12px;
		}
	}

	// 搜索框
	.search {
		position: relative;

		img {
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			left: 70rpx;
		}

		input {
			background-color: #fff;
			width: 85%;
			margin: auto;
			height: 70rpx;
			border-radius: 30rpx;
			margin-top: 60rpx;

			.input-placeholder {
				padding-left: 80rpx;
				font-size: 27rpx;
				color: #C7C7C7;
			}
		}

		button {
			width: 140rpx;
			height: 59rpx;
			border-radius: 30rpx;
			position: absolute;
			left: 550rpx;
			top: 6rpx;
			background-color: #68C993;
			color: #fff;
			line-height: 59rpx;
			font-size: 30rpx;
		}
	}

	// 轮播图
	.wrap {
		padding: 40rpx;
		margin-top: -150rpx;
	}

	// 团购
	.u-grid {
		width: 90%;
		margin: auto;
	}

	.grid-text {
		font-size: 30rpx;
		margin-top: 8rpx;
		color: #3B3B3B;
	}

	.u-grid-item {
		img {
			height: 65rpx;
			width: 65rpx;
		}
	}

	//今日秒杀
	.spikes {
		width: 90%;
		margin: auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;

		.left {
			width: 47%;
			height: 260rpx;
			border-radius: 20rpx;
			background: linear-gradient(#fee9d2, white);

			.left-image {
				.image {
					width: 60px;
					height: 55px;
					margin-top: 10rpx;
				}

				.image:nth-child(1) {
					margin-left: 14rpx;
				}

				.image:nth-child(2) {
					margin-left: 38rpx;
				}
			}

			.color {
				color: #ded4c9;
				font-size: 12px;
				margin-top: 17rpx;
				margin-left: 15rpx;
			}

			.left1 {
				margin-top: 15rpx;
				display: flex;
				justify-content: space-around;

				span {
					background: linear-gradient(to right, #ff0000, #ffff00);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				p {
					font-weight: bold;
				}
			}
		}
		//热销排行榜
		.right {
			width: 47%;
			height: 260rpx;
			border-radius: 20rpx;
			background: linear-gradient(#fee8eb, white);

			.right-image {
				.image {
					width: 60px;
					height: 52px;
					margin-top: 13rpx;
				}

				.image:nth-child(1) {
					margin-left: 23rpx;
				}

				.image:nth-child(2) {
					margin-left: 35rpx;
				}
			}

			.right1 {
				margin-top: 15rpx;
				display: flex;
				justify-content: space-around;

				p:nth-child(1) {
					font-weight: bold;
				}

				p:nth-child(2) {
					font-size: 12px;
					margin-top: -3rpx;
				}

				span {
					font-size: 16px;
					color: #e68455;
					font-weight: bold;
				}
			}

			.color {
				color: #ded4c9;
				font-size: 12px;
				margin-top: 10rpx;
				margin-left: 25rpx;
			}
		}
	}
  //精选好物
  .recommend {
  	width: 90%;
    margin: auto;
  
  	.title {
  		font-size: 30rpx;
  		font-weight: bold;
  	}
  }
  .selected {
  	padding-top: 20rpx;
  	display: flex;
  	justify-content: space-between;
  	flex-wrap: wrap;
  
  	.selected-content {
  		margin-bottom: 20rpx;
  	}
  }
</style>
